import React from "react";
import { Link, browserHistory } from "react-router";

class Header extends React.Component {

    render() {
        const { location = [{ title: "车辆网平台首页", url: "/dashboard" }], pageTitle = "车联网平台首页", amount } = this.props;

        return <div className="r-header">
            <Location data={ location } />
            <PageTitle title={ pageTitle } />
            <Bell amount={ 2 } />
        </div>
    }
}

function Location(props) {
    const {data = []} = props;

    return <div className="sys-loc" data-icon="location">
               <span>位置：</span>
               { data.map((item, i) => <span key={ i } className="part">
                                                                       <Link key={ i } to={ item.url }>{ item.title }</Link>
                                                                       <span className="split">/</span>
                                       </span>) }
           </div>;
}

function PageTitle(props) {
    const { title } = props;
    return <div className="page-title">
        <span className="title">{ title }</span>
    </div>;
}

function Bell(props = {}) {
  const amount = props.amount || 0;
  return <div className="sys-bell" data-has={ amount > 0 } onClick={ browserHistory.push("/message") }>
    <span>消息</span>{ amount > 0 && <span>({amount})</span> }
  </div>;
}

export default Header;